<template>
    <div id="container">
        <div id="title">
            <h1>手机商城</h1>
        </div>
        <div class="input">
            <el-input v-model="name" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
        </div>
        <div class="input">
            <el-input v-model="password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
        </div>
        
            <el-row :gutter="20" justify="center">
                <el-col :span="3" class="grid-content ep-bg-purple" align="middle">
                    <el-button @click="register" style="width: 80%;" type="primary" :disabled="disabled">注册并登录</el-button>
                </el-col>
                <el-col :span="3" class="grid-content ep-bg-purple" align="middle">
                    <el-button @click="login" style="width: 80%;" type="primary">去登录</el-button>
                </el-col></el-row>
      
    </div>
</template>
<script>
// import Storage from '../tools/Storage'
import { ElMessage } from 'element-plus';

export default {
    name: "register",
    data() {
        return {
            name: "",
            password: ""
        }
    },
    computed: {
        disabled() {
            return this.name.length == 0 || this.password.length === 0;
        }
    },
    methods: {
        register() {
            let that = this
            ElMessage({
                message: "登注册成功",
                type: 'success',
                duration: 3000
            })
            that.$router.push({ name: "home" })
        },
        login() {
            let that = this


            that.$router.push({ name: "login" })
        }
    }

}
</script>
<style scoped>
/**/
#container {
    /* background-image: url("");s */
    background-color: gainsboro;
    height: 100%;
    width: 100%;
    position: absolute;
}

#title {
    text-align: center;
    color: rgb(89, 182, 236);
    margin-top: 200px;
}

.input {
    margin: 20px auto;
    width: 500px;
}
</style>